<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#waikuan {
				width: 100%;
				height: 30px;
				background: #CCCCCC;
				position: absolute;
			}
			
			#bar {
				width: 1%;
				height: 30px;
				background-color: greenyellow;
			}
			
			#btn {
				margin: 50px auto;
				padding: 50px auto;
				margin-left: 50px;
			}
		</style>
	</head>

	<body>
		<div id="waikuan">
			<div id="bar"></div>
		</div>
		<br>
		<button id="btn">点击</button>
		<script>
			var waikuan = document.getElementById('btn');
			var bar=document.getElementById('bar')
			btn.onclick = function() {
				var timer = setInterval(fun, 500);
				var width = 1;

				function fun() {
					if(width >= 100) {
						clearInterval(timer)
					} else {
						width = width + 3;
						bar.style.width=width+'%';
					}
				}
			};
		</script>
	</body>

</html>